<template>
  <div id="app">
    <div style=" width: 70%;padding-top: 20px; border-radius: 10px; margin-top: 10px;">
      <el-page-header style="margin-top: 10px; margin-bottom: 10px; color: #0d6efd" @back="goBack"></el-page-header>
      <div style="padding: 10px 0">
        <el-input style="width: 80%" size="medium" placeholder="请输入问题关键字" suffix-icon="el-icon-search" v-model="problem"></el-input>
        <el-button class="ml-5" size="medium" type="primary" @click="load(problem)" plain>搜索</el-button>
        <el-button class="ml-5" size="medium" type="warning" @click="reset" plain>重置</el-button>
      </div>
      <el-card style="width: 100%;margin: auto">
        <span style="color: #0d6efd">一病多问</span>
        <el-form label-width="80px" size="small" style="margin-top: 10px">
          <el-input type="textarea" rows="8" v-model="form.problem" autocomplete="off" :placeholder="msg"></el-input>
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8082/file/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="form.picture" :src="form.picture" style="width: 100px; height: 100px; margin-top: 10px" class="avatar">
            <i v-else class="el-icon-picture" style="color: #0d6efd;"></i><span style="color: #0d6efd">添加图片</span>
          </el-upload>
          <el-form-item style="margin: 10px 0; text-align: right">
            <el-button type="info" @click="delPic">清  空</el-button>
            <el-button type="primary" @click="save">提  交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <div style="padding-top: 20px; border: 1px solid beige; border-radius: 10px; margin-top: 10px; width: 70%">
      <div :title="item.problem" v-for="item in questions" :key="item.id" class="d2">
        <el-link style="margin-bottom: 10px; margin-top: 10px" @click="$router.push({path: '/front/question',query:{question: item}})">{{item.problem}}</el-link><br/>
        <span style="font-size: 10px; color: darkgray">回复数：{{ item.replyList.length }}</span>
        <span style="font-size: 10px; color: darkgray;float: right" v-if="item.replyList.length >= 1">{{ item.replyList[0].createtime }}</span>
        <br/>
      </div>
    </div>
</div>
</template>

<script>
export default {
  name: "DuoWen",
  data() {
    return {
      form: {},
      msg: "请告知您的性别、年龄、症状、相关病史以及具体问题，上传相应图片资料有助于提升回答准确性。",
      questions: {},
      replies: {},
      dateTime: "",
      problem: "",
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    }
  },
  created() {
    console.log(this.$route.query.problem)
    this.load(this.$route.query.problem)
    this.Date()
  },
  methods: {
    load(problem) {
      console.log("问题"+problem)
      this.request.post("/question/list?problem=" + problem).then(res => {
        console.log(res)
        this.questions = res
      })
    },
    reset(){
      this.problem = ""
      this.load(this.problem)
    },
    save() {
      console.log(this.form)
      this.form.userId = this.user.id
      this.request.post("/question/edit", this.form).then(res => {
        if (res) {
          this.$message.success("提交成功")
          this.load(this.problem)
        } else {
          this.$message.error("提交失败")
        }
      })
    },
    handleAvatarSuccess(res) {
      console.log(res)
      this.form.picture = res
      this.load(this.problem)
    },
    delPic(){
      this.form = {}
      this.load(this.problem)
    },
    //获取当前年月日时分秒
    Date() {
      const nowDate = new Date();
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
        hours: nowDate.getHours(),
        minutes: nowDate.getMinutes(),
        seconds: nowDate.getSeconds(),
      };

      const newmonth = date.month > 10 ? date.month : "0" + date.month;
      const newday = date.date > 10 ? date.date : "0" + date.date;
      const newminutes = date.minutes > 10 ? date.minutes : "0" + date.minutes;
      const newseconds = date.seconds > 10 ? date.seconds : "0" + date.seconds;
      //   const newminutes = date.minutes < 10 ? "0" + date.minutes : date.minutes;
      //   const newseconds = date.seconds < 10 ? "0" + date.seconds : date.seconds;

      this.dateTime =
        date.year +
        "-" +
        newmonth +
        "-" +
        newday +
        " " +
        date.hours +
        ":" +
        newminutes +
        ":" +
        newseconds;
    },
    goBack(){
      this.$router.back()
    }
  }
}
</script>

<style scoped>
#app{
  padding-top: 20px;
  display:flex;
  flex-direction: column;  /* 按照列column(垂直方向)排列*/
  justify-content: center;
  align-items: center;
}
.d2{
  padding-bottom: 20px;
  border-bottom: 1px solid gainsboro;
  width: 90%;
  margin: 0 auto
}
</style>
